<!doctype html>
<html>
<head>
    <meta name="Generator" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>{$system_config.title}</title>
    <meta name="Keywords" content="{$system_config.keywords}" />
    <meta name="Description" content="{$system_config.description}" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

    <link rel="stylesheet" href="__HOMECSS__/style.css">
    <script src="__HOMEJS__/jquery-1.7.2.min.js"></script>
    <script src="__HOMEJS__/my.js"></script>
</head>

<body style="margin-bottom:50px;">
<div class="bodybj">
    <!--轮播图-->
    <style>
        .scrollimg{position:relative; overflow:hidden; margin:0px auto; /* 设置焦点图最大宽度 */}
        .scrollimg .hd{
            position: absolute;
            bottom:0px;
            text-align: center;
            width: 100%;
        }
        .scrollimg .hd li{
            display: inline-block;
            width: .4em;
            height: .4em;
            margin: 0 .4em;
            -webkit-border-radius: .8em;
            -moz-border-radius: .8em;
            -ms-border-radius: .8em;
            -o-border-radius: .8em;
            border-radius: .8em;
            background: #FFF;
            filter: alpha(Opacity=60);
            opacity: .6;
            box-shadow: 0 0 1px #ccc; text-indent:-100px; overflow:hidden;
        }
        .scrollimg .hd li.on{
            filter: alpha(Opacity=90);
            opacity: .9;
            background:#E71F19;
            box-shadow: 0 0 2px #ccc;
        }
        ui,li {
            list-style: none;
        }
        #news{
            height: 114px;
            overflow: hidden;
        }
        #news li{
            width: 100%;
        }
        #news li a{
            display: block;
        }
        .index_module a{
            display: block;
        }
    </style>

    <div id="scrollimg" class="scrollimg">
        <div class="bd">
            <ul>
                {foreach name="bannerList" item="item"}
                    <li><a href="{$item.url}"><img src="{$item.image}" width="100%" /></a></li>
                {/foreach}
            </ul>
        </div>
        <div class="hd">
            <ul></ul>
        </div>
    </div>
    <div class="septal_lines"></div>

    <script type="text/javascript">
        TouchSlide({
            slideCell:"#scrollimg",
            titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
            mainCell:".bd ul",
            effect:"leftLoop",
            autoPage:true,//自动分页
            autoPlay:true //自动播放
        });
    </script>

    <!--三个模块区域-->
    <div class="index_module">
        <a href="{:Url('Category/index',['cate_id'=>$category[0]['id']])}" class="index_module_l">
            <h3>{$category[0]['name']}</h3>
            <p>Car wash</p>
            <span class="line"></span>
        </a>
        <ul class="index_module_r">
            <li>
                <a href="{:Url('Category/index',['cate_id'=>$category[1]['id']])}">
                    <h3>{$category[1]['name']}</h3>
                    <p>Polishing</p>
                    <span class="line"></span>
                </a>
            </li>
            <li>
                <a href="{:Url('Category/all')}">
                    <h3>更多服务</h3>
                    <p>More</p>
                    <span class="line"></span>
                </a>
            </li>
        </ul>
    </div>


    <div class="septal_lines"></div>
    <div class="floor2">
        <h4><span>汽车资讯</span></h4>
        <div id="news">
            <ul>
                {foreach name="articleList" item="item"}
                    <li><a href="{:Url('Article/detail',['id'=>$item['id']])}" title="{$item.title}">{$item.title}</a></li>
                {/foreach}
            </ul>
        </div>
    </div>

    <!--产品推荐-->
    <div class="floor2" style="display: none;">
        <h4><span>产品推荐</span></h4>
        <ul>
            {foreach name="recommendGoods" item="item"}
                <li>
                    <div class="floor2_img">
                        <a href="{:Url('Goods/detail',['id'=>$item['id']])}">
                            <img src="{$item.image}" alt="">
                        </a>
                    </div>
                    <div class="floor2_p">
                        <p>{$item.goods_name}</p>
                    </div>
                    <div class="secbottom_price">

                        <span>¥ {$item.price}</span>

                    </div>
                </li>
            {/foreach}
        </ul>
    </div>

    <!--底部-->
    {include file="Public:footer" /}
</div>

<script>
    $(function() {
        var $this = $("#news");
        var scrollTimer;
        $this.hover(function() {
            clearInterval(scrollTimer);
        }, function() {
            scrollTimer = setInterval(function() {
                scrollNews($this);
            }, 3000);
        }).trigger("mouseleave");

        function scrollNews(obj) {
            var $self = obj.find("ul");
            var lineHeight = $self.find("li:first").height() + 12;
            $self.animate({
                "marginTop": -lineHeight + "px"
            }, 500, function() {
                $self.css({
                    marginTop: 0
                }).find("li:first").appendTo($self);
            })
        }
    })
</script>
</body>
</html>
